* { margin: 0; padding: 0;}
html,body{height:100%; width: 100%; text-align: center;-webkit-tap-highlight-color:rgba(0,0,0,0); background: -webkit-radial-gradient(50% 50%,circle farthest-side, #FFFFFF 45%, #fbf4d1 );}
div:focus{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-modify:read-write-plaintext-only; }
Section{overflow: hidden; min-height: 650px;height: 100%;  width: 414px; position: relative; margin: auto;}
.logo{width: 200px; height: 23px; position: absolute; left: 23px; top: 14px; background: url(../images/logo.png); background-size: 100% 100%; z-index: 2;}
section{}
#homeSection{}
.homeIcon{width: 112px; height: 56px; position: absolute; top: 7px; right: 20px; background: url(../images/homeIcon.png); background-size: 100% 100%;z-index: 2;}
.homeTxt{width: 346px; height: 47px; position: absolute; top: 65%; left: 44px; background: url(../images/homePic1.png); background-size: 100% 100%;}
.homeBtn1{width: 295px; height: 75px; position: absolute; bottom: 15%; left: 58px; background: url(../images/homeBtn1.png); background-size: 100% 100%;}
.homeBtn2{width: 81px; height: 27px; position: absolute; bottom: 39px; left: 30px; background: -webkit-linear-gradient(#FF8900, #FF6505); border-radius:6px ; line-height: 27px; color: #FFFFFF; font-size: 16px; font-weight: bold; background-size: 100% 100%;}
.homeBtn3{width: 81px; height: 27px; position: absolute; bottom: 39px; left: 120px; background: -webkit-linear-gradient(#FF8900, #FF6505); border-radius:6px ; line-height: 27px; color: #FFFFFF; font-size: 16px; font-weight: bold;  background-size: 100% 100%;}
.homeBtn4{width: 81px; height: 27px; position: absolute; bottom: 39px; left: 209px; background: -webkit-linear-gradient(#FF8900, #FF6505); border-radius:6px ; line-height: 27px; color: #FFFFFF; font-size: 16px; font-weight: bold;  background-size: 100% 100%;}
.homeBtn5{width: 81px; height: 27px; position: absolute; bottom: 39px; left: 298px; background: -webkit-linear-gradient(#FF8900, #FF6505); border-radius:6px ; line-height: 27px; color: #FFFFFF; font-size: 16px; font-weight: bold;  background-size: 100% 100%;}
.homeAnn{width: 350px; height: 19px; position: absolute !important; bottom: 74px; left: 30px;  background: url(../images/ann.png) no-repeat; background-size: 25px 19px; overflow: hidden;}
.homeAnn ul {width:100%;}
.homeAnn ul li{ list-style: none; font-size: 14px; text-align: center; width: 100%;}
#homeSection .cardPo .card .back{background:url(../images/backBg2.png) no-repeat !important;background-size: 100% 100% !important;}
#homeSection .homeBtn1 .hand{ width: 77px; height: 85px; position: absolute; top: 14px; right: -24px; background: url(../images/hand.png); background-size: 100% 100%;}


.cardBox{ width: 378px; height: 350px; position: absolute; top: 11%; left: 19px;  z-index: 500;}/* top: -15px; left: -42px;*/
.cardPo{width: 122px; height: 173px; -webkit-perspective:500px; position:absolute;-webkit-transition: all 800ms; z-index: 0;}/* width: 244px; height: 346px; -webkit-transform: scale(0.5); */
.withBounce{-webkit-transition: all 800ms  cubic-bezier(0.68,-.55,.265,1.55) !important;}
.cardPo:nth-child(1){top:0px; left: 0px;}
.cardPo:nth-child(2){top:0px; left: 128px;}
.cardPo:nth-child(3){top:0px; left: 256px;}
.cardPo:nth-child(4){top:177px; left: 0px;}
.cardPo:nth-child(5){top:177px; left: 128px;}
.cardPo:nth-child(6){top:177px; left: 256px;}
.poCenter{top:132px !important;left: 124px !important;}
.poShow{top:174px !important;left: 124px !important;}
.cardPo .card{width: 100%; height: 100%;-webkit-transform-style: preserve-3d;-webkit-transform: rotateY(0deg); -webkit-transition: all 1s  cubic-bezier(0.68,-.55,.265,1.55);}
.cardPo .card .front , .cardPo .card .back{width: 200%;height: 200%;position: absolute;left: -50%;top: -50%;text-align: center;   }
.cardPo .card .front{-webkit-backface-visibility:hidden;-webkit-transform: rotateY(180deg) scale(0.5); background-size: 100% 100%;}
.cardPo .card .front img{width: 100%; height:100%;}
.cardPo .card .back{-webkit-backface-visibility:hidden; background:url(../images/backBg.png) no-repeat;-webkit-transform: rotateY(0deg) scale(0.5); background-size: 100% 100%;}
.cardPo .card .back img{width:100%; height: 100%;}
.cardPo .big{-webkit-transform: rotateY(180deg) scale(2);}
/* .cardPo .big{-webkit-animation: bigAni 1s forwards;}*/
.cardPo .open{-webkit-transform: rotateY(180deg);}
.opened{-webkit-transform: rotateY(180deg) !important;}
/* .cardPo .open{-webkit-animation: cardOpen 1s forwards cubic-bezier(0.68,-.55,.265,1.55);} */
.cardPo .close{-webkit-animation: cardClose 1s forwards cubic-bezier(0.68,-.55,.265,1.55);}
.hide{opacity: 0; visibility: hidden;}
.fadein{-webkit-animation: fadein 1s forwards; visibility:visible;}
.fadeout{-webkit-animation: fadeout 1s forwards;}
@-webkit-keyframes cardOpen{
	0%   {-webkit-transform: rotateY(0deg);}
	100% {-webkit-transform: rotateY(180deg);}
}
@-webkit-keyframes cardClose{
	0%   {-webkit-transform: rotateY(180deg);}
	100% {-webkit-transform: rotateY(0deg);}
}
@-webkit-keyframes fadeout{
	0%   {opacity: 1;}
	100% {opacity: 0;}
}
@-webkit-keyframes fadein{
	0%   {opacity: 0;}
	100% {opacity: 1;}
}
@-webkit-keyframes bigAni{
	0%   {-webkit-transform: rotateY(0deg) scale(1);}
	100% {-webkit-transform: rotateY(180deg) scale(2);}
}
#sec1 .cardPo  .card{-webkit-transform-origin: center 75%;}
.cardPo .rollCard{-webkit-animation: rollCardAni 1000ms forwards;}
@-webkit-keyframes rollCardAni{
	0%   {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}

#swipeSection .cardBox{top:124px; z-index: 2;}
#swipeSection .poCenter{top:80px !important;left: 124px !important;}
#swipeSection .txt0{ width: 223px; height: 64px; position: absolute; left: 94px; top: 512px; background: url(../images/swipeTxt0.png); background-size: 100% 100%;
	-webkit-transition:all 500ms cubic-bezier(0.68,-.55,.265,1.55); -webkit-transform: translateY(0px); opacity: 0;
}
#swipeSection .txt{ width: 286px; height: 65px; position: absolute; left: 66px; top: 511px; background: url(../images/swipeTxt.png); background-size: 100% 100%;
	-webkit-transition:all 500ms cubic-bezier(0.68,-.55,.265,1.55); -webkit-transform: translateY(-50px); opacity: 0;
}
#swipeSection .txtShow{ -webkit-transform: translateY(0px); opacity: 1;}
#swipeSection .txtHide{ -webkit-transform: translateY(50px); opacity: 0;}
#swipeSection .cardHead{width: 414px; height: 163px; position: absolute; top: 54px; z-index: 0;}
#swipeSection .cardHead>img{width: 100%; height: 100%;}
#swipeSection .shareBtn{width: 174px; height: 49px; position: absolute;left: 118px; bottom: 74px;background: #FF6600; border-radius: 6px; line-height: 49px; color: #FFF; font-weight: bold; font-size: 20px; text-shadow: 0 0 2px rgba(0,0,0,0.4);}
#swipeSection .homeBtn{ width: 81px; height: 28px; position: absolute; left: 75px; bottom: 37px; background: #FF6600; border-radius: 6px; line-height: 28px; color: #FFF; font-weight: bold; font-size: 14px; text-shadow: 0 0 2px rgba(0,0,0,0.4);}
#swipeSection .progBtn{ width: 81px; height: 28px; position: absolute; left: 165px; bottom: 37px; background: #FF6600; border-radius: 6px; line-height: 28px; color: #FFF; font-weight: bold; font-size: 14px; text-shadow: 0 0 2px rgba(0,0,0,0.4);}
#swipeSection .noteBtn{ width: 81px; height: 28px; position: absolute; left: 255px; bottom: 37px; background: #FF6600; border-radius: 6px; line-height: 28px; color: #FFF; font-weight: bold; font-size: 14px; text-shadow: 0 0 2px rgba(0,0,0,0.4);}

#progressSection{}
#progressSection .showCard{width: 250px; height: 356px; position: absolute; left: 82px; top: 140px;}
#progressSection .showCard>img{width: 100%; height: 100%;}

#progressSection .showCard .medal {
	width: 80px;
	height: 80px;
	position: absolute;
	right: -27px;
	top: -35px;
	background: url(../images/medal.png);
	background-size: 100% 100%;
	display: none;
}
#progressSection .progressMsg{ display:none; width: 100%;position: absolute; top: 526px; left: 0; font-size: 20px; color: #993300; font-weight: bold;}
#progressSection .homeBtn{ width: 81px; height: 28px; position: absolute; left: 122px; bottom: 47px; background: #FF6600; border-radius: 6px; line-height: 28px; color: #FFF; font-weight: bold; font-size: 14px; text-shadow: 0 0 2px rgba(0,0,0,0.4);}
#progressSection .noteBtn{ width: 81px; height: 28px; position: absolute; left: 212px; bottom: 47px; background: #FF6600; border-radius: 6px; line-height: 28px; color: #FFF; font-weight: bold; font-size: 14px; text-shadow: 0 0 2px rgba(0,0,0,0.4);}

#resultSection{}
#resultSection .resultCard{ width: 250px; height: 356px; position: absolute; left: 82px; top: 170px; -webkit-transform-style: preserve-3d;-webkit-perspective:500px; z-index: 1;}
#resultSection .card{ width: 250px; height: 356px; position: absolute;-webkit-transform-style: preserve-3d;-webkit-transform: rotateY(0deg); -webkit-transition: all 1s  cubic-bezier(0.68,-.55,.265,1.55);}
#resultSection .open{-webkit-transform: rotateY(180deg);}
.resultCard .front , .resultCard .back{width: 100%;height: 100%; position: absolute;}
.resultCard .front{-webkit-backface-visibility:hidden;-webkit-transform: rotateY(180deg);}
.resultCard .front img{width: 100%; height:100%;}
.resultCard .back{-webkit-backface-visibility:hidden; background:url(../images/backBg.png) no-repeat; background-size: 100% 100%;}
.resultCard .back img{width:100%; height: 100%;}
#resultSection .cardHead{width: 414px; height: 163px; position: absolute; top: 54px; z-index: 0;}
#resultSection .cardHead>img{width: 100%; height: 100%;}
#resultSection .shareBtn{width: 174px; height: 49px; position: absolute;left: 118px; bottom: 74px;background: #FF6600; border-radius: 6px; line-height: 49px; color: #FFF; font-weight: bold; font-size: 20px; text-shadow: 0 0 2px rgba(0,0,0,0.4);}
#resultSection .homeBtn{ width: 81px; height: 28px; position: absolute; left: 75px; bottom: 37px; background: #FF6600; border-radius: 6px; line-height: 28px; color: #FFF; font-weight: bold; font-size: 14px; text-shadow: 0 0 2px rgba(0,0,0,0.4);}
#resultSection .progBtn{ width: 81px; height: 28px; position: absolute; left: 165px; bottom: 37px; background: #FF6600; border-radius: 6px; line-height: 28px; color: #FFF; font-weight: bold; font-size: 14px; text-shadow: 0 0 2px rgba(0,0,0,0.4);}
#resultSection .noteBtn{ width: 81px; height: 28px; position: absolute; left: 255px; bottom: 37px; background: #FF6600; border-radius: 6px; line-height: 28px; color: #FFF; font-weight: bold; font-size: 14px; text-shadow: 0 0 2px rgba(0,0,0,0.4);}


/* popups */

.md-modal {position: fixed;top: 50%;left: 50%;max-width: 750px;min-width: 320px;height: auto;z-index: 2000;visibility: hidden;-webkit-backface-visibility: hidden;-webkit-transform: translateX(-50%) translateY(-50%);}
.md-shareModal{position: absolute;width: 156px; height: 82px; right: 25px; top: 25px; background: url(../images/share.png); background-size:100% 100% ;z-index: 2000;visibility: hidden;}
.md-shareModal ~ .md-overlay { background: rgba(0,0,0,0.6);}
.md-show {visibility: visible;}
.md-overlay {position: fixed;width: 100%;height: 100%;visibility: hidden;top: 0;left: 0;z-index: 1000;opacity: 0;background: rgba(0,0,0,0.6);-webkit-transition: all 0.3s;}
.md-show ~ .md-overlay {opacity: 1;visibility: visible;}

/* Content styles */
.md-content {position: relative;border-radius: 6px;border: 3px solid #8E6937;margin: 0 auto;}
.md-effect-3 .md-content {-webkit-transform: translateY(20%);opacity: 0;-webkit-transition: all 0.3s;}
.md-show.md-effect-3 .md-content {-webkit-transform: translateY(0);opacity: 1;}

.popUp{background:#FFF;padding: 8px;}
.popUp .md-close{ width: 22px; height: 22px; position: absolute; display: block; right: 14px; top:14px; background:url(../images/eventClose.png); background-size: 100% 100%;z-index: 1;}
.popUp .popUpTitle{height: 30px; line-height: 30px; text-align: center; position: relative; font-size: 20px; font-weight: bold;}
.popUp .popBorder{height:calc(100% - 16px);padding: 8px; border: 1px solid #8E6937; border-radius: 6px; overflow: hidden; text-align: left; font-size:14px; color: #8e6937;}
.popUp .swiper-slide{ width: 325px;}
.popUp .swiper-scrollbar {border-radius: 10px;position: relative;-ms-touch-action: none;}
.popUp .swiper-container-vertical > .swiper-scrollbar {width: 20px !important;position: absolute;right: 0px;z-index: 150;width: 15px;background: transparent;}
.popUp .swiper-scrollbar-drag {height: 100%;width: 11px;position: relative;background: #ff6600;border-radius: 10px;left: 0;top: 0;}
.popUp .swiper-scrollbar-cursor-drag {cursor: move;}

.popLongTxt{width: 366px; height: 510px;}
.popLongTxt h4{ margin: 10px 0 10px; font-size: 16px;}
.popLongTxt p{margin-bottom: 5px;}
.popLongTxt .blod{font-weight: bold;}
.popLongTxt ol{padding-left: 28px;}
.popLongTxt ol li{list-style-type:decimal;}
.popLongTxt a{color: #8e6937; font-weight: bold;}
.popLongTxt table{background: #8e6937;}
.popLongTxt td{background: #FFF; padding: 4px;}
.popAlert{width: 366px; text-align: center;}

#popNote1 .swiper-container {width: 350px;top: 50px;bottom: 8px;position: absolute;}   
#popNote2 .swiper-container {width: 350px;top: 50px;bottom: 68px;position: absolute;}   
#popNote2 .agreeBtn{width: 143px; height: 48px; position: absolute; left: 50%; margin-left: -70px; bottom: 20px; text-align: center; background: #FF6600; border-radius: 6px; line-height: 48px; color: #FFF; font-weight: bold; font-size: 18px; text-shadow: 0 0 2px rgba(0,0,0,0.4);}


.popAlert .popUpTitle{}
.popAlert .popMsg{margin-top: 40px; line-height:26px;text-align: center;}
.popAlert .onlyMsg{margin: 50px 0; line-height:26px;text-align: center;}
.popAlert .popBox{ min-height: 150px; padding: 20px 0;}
.popBtn{width: 142px; height: 48px; line-height: 48px; border-radius: 8px; background: -webkit-linear-gradient(#ff8a00, #ff6505); margin: auto; 
text-align: center; color: #FFF; font-size: 22px; font-weight: bold; text-shadow: 0 0 2px rgba(0,0,0,0.4);}
.alertBtn1{margin-top: 40px;}

#popAlert4 .popMsg{margin: 50px 0; line-height:26px;text-align: center;}
#popAlert4 .takeCardBtn{width: 143px; height: 48px; margin: auto; margin-bottom: 20px; text-align: center;  background: #FF6600; border-radius: 6px; line-height: 48px; color: #FFF; font-weight: bold; font-size: 18px; text-shadow: 0 0 2px rgba(0,0,0,0.4);}

.timeOutAlert .popUpTitle{ font-size:22px}
.timeOutAlert .popMsg{ font-size:16px}
.awardTxt{ display: none;}
.aPannel{display:none;}
